<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .box {
        width: 500px;
        margin: 10px auto;
        position: relative;
        border: 2px solid black;
      }

      .nav {
        width: 100%;
        overflow: hidden;
      }

      .nav > li {
        float: left;
        width: 100px;
        text-align: center;
        padding: 10px 0;
        cursor: pointer;
      }

      .nav > li:hover,
      .nav > .active {
        color: pink;
        font-weight: bold;
        /* background-color: pink; */
      }

      .slide {
        width: 100px;
        height: 4px;
        background-color: pink;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <!-- 导航 -->
      <ul class="nav">
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
      </ul>
      <!-- 指示条 -->
      <div class="slide"></div>
    </div>
    <script>
      //获取所需元素
      let navs = document.getElementsByTagName("li");
      let slide = document.getElementsByClassName("slide")[0];
      //初始值
      let time = null;
      //封装运动过程
      function move(_index) {
        let start = slide.offsetLeft; //起点
        let end = slide.offsetWidth * _index; //结束位置
        let change = end - start;
        //使用定时器
        time = setInterval(function () {
          if (change > 0) {
            start += 10;
            if (start >= end) {
              clearInterval(time);
            }
          } else {
            start -= 10;
            if (start <= end) {
              clearInterval(time);
            }
          }
          //复制滚动条
          slide.style.left = start + "px";
        }, 10);
        //navs滚动条的操作
        for (let i = 0; i < navs.length; i++) {
          navs[i].className = "";
        }
        navs[_index].className = "active";
      }
      //tab切换
      for (var i = 0; i < navs.length; i++) {
        navs[i].onclick = function () {
          clearInterval(time);
          for (var j = 0; j < navs.length; j++) {
            if (navs[j] == this) {
              move(j);
            }
          }
        };
      }
    </script>
  </body>
</html>
